<template>
	<view class="popup" v-if="visible" @touchmove.stop.prevent @click="closed">
		<up-transition :show="true">
			<view class="panel" @touchmove.stop.prevent @click.stop>
				<image class="panel-close" :src="$ICON('/index/home/closed.png')" @click="closed" />
				<image class="panel-top" :src="$ICON('/index/home/offline_top.png')" />
				<view class="panel-desc">
					最近开设了一场优质活动，邀请您报名参与~
				</view>
				<view class="panel-body">
					<OfflinePopupCom :info="detail" />
				</view>
				<image class="panel-btn" :src="$ICON('/index/home/offline_btn.png')" @click="handleDetail" />
			</view>
		</up-transition>
	</view>
</template>

<script lang="ts" setup>
	import api from "@/api"
	import OfflinePopupCom from "./components/OfflinePopupCom.vue"
	const emit = defineEmits(['closed', 'success'])
	const visible = ref(false)
	const detail = ref({
		id: "",
	})
	const handleDetail = () => {
		visible.value = false
		uni.switchTab({
			url: `/pages/activity/index`,
		})
	}
	const closed = () => {
		visible.value = false
		emit('closed')
	}
	const getDetail = async () => {
		const res = await api.system.popup.get()
		if (res?.code === 1) {
			if (res?.data.offline_course?.length > 0) {
				detail.value = res.data.offline_course[0] || {}
				nextTick(() => {
					visible.value = true
				})
			}
		}
	}
	defineExpose({ getDetail })
</script>

<style lang="scss" scoped>
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100vh;
		width: 100%;
		z-index: 999;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.panel {
		box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(181, 181, 181, 0.1);
		background: linear-gradient(180deg, #FDFDFD 0%, #F9DDD1 100%);
		border-radius: 8rpx;
		width: calc(100vw - 100rpx);
		padding: 48rpx 0;
		overflow: hidden;
		position: relative;

		&-close {
			position: absolute;
			top: 24rpx;
			right: 24rpx;
			width: 48rpx;
			height: 48rpx;
			display: block;
		}

		&-top {
			width: 284rpx;
			height: 60rpx;
			display: block;
			margin: 0 auto;
			margin-bottom: 20rpx;
		}

		&-desc {
			font-weight: 400;
			font-size: 28rpx;
			color: #0F0F2B;
			line-height: 48rpx;
			margin-bottom: 40rpx;
			text-align: center;
		}

		&-body {
			width: calc(100% - 48rpx);
			margin: 0 auto;
			margin-bottom: 60rpx;
		}

		&-btn {
			width: 394rpx;
			height: 88rpx;
			display: block;
			margin: 0 auto;
		}
	}
</style>
